import React, { Component } from "react"
import { Text, TouchableOpacity, View } from "react-native"
import EventListFragment from "./EventListFragment"
import { inject, observer } from "mobx-react"
import { palette } from "../../theme/base/palette"

interface P {
  rootStore: any
  history?: any
}

interface S {}
let timer

@inject("rootStore")
@observer
export class EventListScreen extends Component<P, S> {
  componentDidMount = () => {
    let eventStore = this.props.rootStore.eventStore
    eventStore.loadData()
    // timer = setInterval(() => {
    // }, 2000)
  }

  componentWillUnmount() {
    timer && clearTimeout(timer)
  }

  render() {
    let eventStore = this.props.rootStore.eventStore

    return (
      <View style={{ flex: 1 }}>
        <TouchableOpacity
          style={{ padding: 30, backgroundColor: palette.orange }}
          onPress={() => {
            this.props.history.goBack()
          }}
        >
          <Text> 返回 </Text>
        </TouchableOpacity>
        {eventStore.leagueData && <EventListFragment leagueData={eventStore.leagueData} />}
      </View>
    )
  }
}

export default EventListScreen
